<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用bootstrap绘制form表单</title>
    <!-- Bootstrap core CSS -->
    <link
            href="static/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css"
            rel="stylesheet">
    <link
            href="static/plugins/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css"
            rel="stylesheet">
    <!-- bootstrap-datepicker-1.9.0-dist -->
    <link
            href="static/plugins/bootstrap-datepicker-1.9.0-dist/css/bootstrap-datepicker.min.css"
            rel="stylesheet">

    <!-- Bootstrap core JavaScript-->
    <!-- Placed at the end of the document so the pages load faster -->
    <!--import jquery before bootstrap javascript-->
    <script
            src="static/plugins/jquery-1.12.4/jquery-1.12.4.min.js"></script>
    <script
            src="static/plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <!-- bootstrap-datepicker-1.9.0-dist -->
    <script
            src="static/plugins/bootstrap-datepicker-1.9.0-dist/js/bootstrap-datepicker.min.js"></script>

    <script
            src="static/plugins/bootstrap-datepicker-1.9.0-dist/locales/bootstrap-datepicker.zh-CN.min.js"></script>
    <!-- My97DatePicker -->
    <script
            src="static/plugins/My97DatePicker/WdatePicker.js"></script>

    <script type="text/javascript">
        // 给日期输入框添加事件处理
        $(function() {
            $("#txtCreateDate1").datepicker({
                format : "yyyy-mm-dd",
                language : "fr",
                todayBtn : true
            });
        });

        // 删除按钮点击触发的事件:用于发送删除请求
        function deleteMe(userId){
            // 使用确认框，确认用户是否需要进行删除操作
            var r=confirm("您确认删除该记录么?")
            if (r==true){
                // 使用get方式发送请求
                window.location.href = "UserInfoDeletingControl?uid=" + userId;
            }

        }

        ///////////////////////////////////////////////////////////
        ///// ajax查询
        function doAjaxQuery(){
            // 使用ajax进行查询

            $.ajax({
                // 请求类型
                type: "get",
                // 请求的url，和form的action属性值一样
                //url: "http://localhost:9090/ssm20190625/adminInfoAjaxQueryingAction2",
                //url: "http://localhost:9090/ssm20190625/admininfo/2",
                url:"http://localhost:8090/servlet20190625_jsonp/AdminInfoAjaxQueryJsonpAction?callback=?",
                // 发送的表单数据，按照如下格式提供即可："name=John&location=Boston"
                data:  $("#form1").serialize(), // 序列化表单参数，获取一个序列化的字符串，用于ajax请求，必须在form中才可以使用
                // response响应的数据类型，默认是文本类型，可以指定为 xml、html、json等类型
                dataType:"jsonp",    // jquery的jsonp只支持get方式，如果想要支持其他的请求类型，使用SpringMVC的cors方式
                // 回调函数
                success: function(data){
                    console.info("回调结果：");
                    console.info(data);
                    console.info(data.length>0);
                    // 进行dom操作，局部修改浏览器的显示数据，进行局部刷新数据
                    if(data != null){
                        //console.info("hhhhh");
                        //console.info(data);
                        // 此处 json对象data是一个数组类型，所有可以使用form循环进行遍历
                        /* for(var i=0;i<data.length;i++){
                            console.info(data[i]);
                            // 此处 data[i] 是json对象中的一个元素，该元素是一个一个对象类型，可以使用.操作符获取指定属性的值
                            console.info(data[i].user_Name);
                            console.info(data[i]["user_Name"]);
                        } */

                        // 组合的html内容穿
                        var strHtml = "";
                        // ajax结果集为list或者数组类型集合，进行for循环迭代遍历
                        if(data.length >0 ){
                            $.each( data, function(index, eachVal){
                                // 此处的eachVal是被遍历的结果集 data中的一个元素
                                // 根据后台封装的结果集结构，eachVal是一个实体类对象

                                strHtml+="<tr>";

                                strHtml+="<th scope='row'>"
                                strHtml+=(index+1);
                                strHtml+="</th>";

                                strHtml+="<td>";
                                strHtml+=eachVal.adminname;
                                strHtml+="</td>";

                                strHtml+="<td>";
                                strHtml+=eachVal.admincreatedate;
                                strHtml+="</td>";

                                /*strHtml+="<td>";
                                strHtml+="<img alt='头像' src='${pageContext.servletContext.contextPath}/";
                             strHtml+=eachVal.user_img;
                             strHtml+="' width='40px' height='40px'>"
                             strHtml+="</td>";*/

                                strHtml+="<td><a href='${pageContext.servletContext.contextPath}/UserInfoModifyJumpControl?uid="+eachVal.user_Id+"'>修改</a></td>";
                                strHtml+="<td><button type='button' class='btn btn-default' onclick='deleteMe("+eachVal.user_Id+")'>删除</button></td>";
                                strHtml+="</tr>";
                            });
                        }else{
                            // ajax结果为单个实体类类型，直接解析即可

                            strHtml+="<tr>";

                            strHtml+="<th scope='row'>"
                            strHtml+=1;
                            strHtml+="</th>";

                            strHtml+="<td>";
                            strHtml+=data.adminname;
                            strHtml+="</td>";

                            strHtml+="<td>";
                            strHtml+=data.admincreatedate;
                            strHtml+="</td>";

                            /*strHtml+="<td>";
                            strHtml+="<img alt='头像' src='${pageContext.servletContext.contextPath}/";
                             strHtml+=data.user_img;
                             strHtml+="' width='40px' height='40px'>"
                             strHtml+="</td>";*/

                            strHtml+="<td><a href='${pageContext.servletContext.contextPath}/UserInfoModifyJumpControl?uid="+data.adminid+"'>修改</a></td>";
                            strHtml+="<td><button type='button' class='btn btn-default' onclick='deleteMe("+data.adminid+")'>删除</button></td>";
                            strHtml+="</tr>";

                        }

                        // end each遍历方法
                        // 将要显示的html，使用dom操作，添加到tbody标签中
                        $("#tbody1").html(strHtml);
                    }
                },
                error:function () {
                    console.info("error")
                }

            });
        }


        //////////////////////////////////////////////////////////

    </script>

    <style>
        #maindiv {
            width: 80%;
            padding-top: 10px;
            /* margin: 0px, auto; */
            padding-left: 50px;
        }
    </style>
</head>
<body>
<div id="maindiv">
    <div>
        <form id="form1" class="form-horizontal" >
            <div class="form-group">
                <label class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" id="txtUserName"
                           name="adminname" placeholder="请输入用户名">
                </div>

                <label class="col-sm-2 control-label">创建日期</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" id="txtCreateDate"
                           name="admincreatedate" onClick="WdatePicker()" placeholder="开始日期">

                    <input type="text" class="form-control" id="txtCreateDate1"
                           name="admincreatedate2" placeholder="结束日期">
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-2">
                    <button type="button" id="btnQuery" class="btn btn-default"
                            onclick="doAjaxQuery()">查询</button>
                </div>
                <div class="col-sm-offset-4 col-sm-2">
                    <button type="reset" class="btn btn-default">重置</button>
                </div>
            </div>
        </form>
    </div>

    <!-- 显示查询结果部分-->
    <div class="row">

        <table class="table table-hover">
            <thead>
            <tr>
                <th>序号</th>
                <th>用户名</th>
                <th>创建日期</th>
                <th>头像</th>
                <th>修改</th>
                <th>删除</th>
            </tr>
            </thead>
            <tbody id="tbody1">
            <!-- 此处根据ajax回调的结果数据集进行动态拼写html的内容 -->
            </tbody>
        </table>

    </div>
    <div class="row">
        <div id="myPagination"></div>
    </div>
</div>
</body>
</html>